<template>
	<view :class="minishop.config.style">
		<view class="share-img">
			<image mode="widthFix" :src="shareImg" class="image" @error="imageError"></image>
		</view>
		<view class="footer">
			<view class="bg-preview">
				<scroll-view class="scroll-view-main" scroll-x="true" scroll-left="1">
					<view class="icon-item" :class="index == activeIndex?'active':''" v-for="(item,index) in bgArr" :key="index" @click="createImg(index,item.title)">
						<image mode="widthFix" :src="item.url" class="image"></image>
					</view>
				</scroll-view>
			</view>
			<view class="share-type" @click="shareType()">
				<text>分享方式</text>
			</view>
		</view>
		
		<!-- 下单弹出框 -->
		<uni-popup ref="shareType" type="bottom">
			<view class="shareTypeDetail">
				<view class="share-title">分享方式</view>
				<view class="section">
					<view class="title">方法一</view>
					<view class="desc">
						<view class="item">微信内直接分享</view>
						<view class="item">点击微信右上角三个点 “...”</view>
						<view class="item">通过 【发送给朋友】或 【分享至朋友圈】分享</view>
					</view>
				</view>
				<view class="section">
					<view class="title">方法二</view>
					<view class="desc">
						<view class="item">微信内分享海报</view>
						<view class="item">长按上方图片，将图片保存至手机</view>
						<view class="item">通过从相册选择分享海报至朋友或朋友圈分享</view>
					</view>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	// 分享海报，仅H5端支持
	import Base from '@/muu_minishop/common/base.vue'
	//生成二维码(兼容打包，并未使用)
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	
	export default {
		extends:Base,
		components: {
			ayQrcode
		},
		data() {
			return {
				loading: true, // 数据是否加载完成
				urlParams: {},
				type: '',
				type_id: 0,
				bgArr: [], // 海报背景图数组
				shareImg: 'https://w7.hoomuu.net/app/index.php?i=5&c=entry&a=site&do=share&action=img&type=Knowledge&type_id=77&uid=7360&bg=bg4.jpg&m=muu_classroom', // 生成的海报图片路径
				activeIndex: 0, // 海报背景图索引
			}
		},
		async onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			await this.$onLaunched
			await this.baseIsReady()

			this.type = this.urlParams.type
			this.type_id = this.urlParams.type_id
			Promise.all([this.getBg(),this.createImg(0,'bg2.jpg')]).then(res => {
				//加载完成
				this.loading = false
			})
		},
		created() {
			
		},
		
		methods: {
			imageError(e){
				console.log(e)
			},

			/**
			 * 获取海报背景数据
			 */
			getBg: function(){
				let that = this
				return new Promise((resolve, reject) => {
					let params = this.urlParams
					let data = {}
						data.action = 'bg'
					//获取数据
					this.util.request({
						url : 'entry/site/share',
						data : data,
						method: 'POST',
						success: function (res) {
							//console.log(res)
							if (res.data.code == 200) {
								that.bgArr = res.data.data
								
							}
							resolve(res.data)
						}
					})
				})
				
			},
			/**
			 * 生成分享海报
			 * @param {Object} bg_title
			 */
			createImg: function(index,bg_title){
				let that = this
				let params = this.urlParams
				let data = {}
					data.action = 'create'
					data.type = this.type
					data.type_id = this.type_id
					data.bg = bg_title
					data.source = 'spa'
				//获取首页数据
				this.util.request({
					url : 'entry/site/share',
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.shareImg = res.data.data
							that.activeIndex = index
						}
					}
				})
			},
			
			/**
			 * 分享方式说明
			 */
			shareType: function(){
				this.$refs.shareType.open()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #3B4144;
	}
	.share-img {
		margin: 10rpx 40rpx 0 40rpx;
		.image {
			width: 100%;
			height: 488rpx;
		}
	}
	
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		border-top: 1px solid #f8f8f8;
		background-color: #fff;
		display: flex;
		padding-bottom: calc(0 + constant(safe-area-inset-bottom));
		padding-bottom: calc(0 + env(safe-area-inset-bottom));
		.bg-preview {
			flex: 1;
			overflow: hidden;
			.scroll-view-main {
				white-space: nowrap;
				width: 100%;
				overflow: hidden;
				.icon-item {
					position: relative;
					font-size: 28rpx;
					display: inline-block;
					margin: 6rpx;
					color: #666;
					width: 108rpx;
					height: 108rpx;
					border: 6rpx solid #f8f8f8;
					border-radius: 50%;
					overflow: hidden;
					.images {
						width: 108rpx;
						height: 108rpx;
					}
				}
				.icon-item.active {
					border: 6rpx solid $Blue;
				}
			}
		}
		.share-type {
			width: 126rpx;
			padding: 6rpx;
			line-height: 118rpx;
			font-size: 28rpx;
			color: #666;
		}
		
	}
	.shareTypeDetail {
		background-color: #fff;
		padding: 20rpx;
		.share-title {
			font-size: 38rpx;
			font-weight: 700;
			margin-bottom: 20rpx;
		}
		.title {
			font-size: 30rpx;
			font-weight: 700;
			color: #333;
		}
		.desc {
			.item {
				padding: 10rpx;
				font-size: 26rpx;
				color: #999;
			}
		}
	}
	

</style>
